<style lang="less">
@import "../../styles/common.less";
@import "./add.less";
</style>

<template>
    <div>
        <Row>
            <Card >
                <div class="step-header-con" style="margin-bottom: 32px">
                    <h3>{{ eventTitle.title }}</h3>
                    <h5>{{ eventTitle.describe }}</h5>
                </div>
                <Form class="step-form" ref="step" :model="eventForm" :rules="formRules" :label-width="100" style="max-width: 1024px; margin: 24px auto 32px; min-height: calc(100vh - 400px)">
                    <Col :sm="24" :md="24" :lg="12">
                        <FormItem label="故障类型：" prop="eventType">
                            <Select v-model="eventForm.eventType" style="width:100%" filterable>
                                <Option v-for="item in eventTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :sm="24" :md="24" :lg="12">
                        <FormItem label="报告对象" prop="owner">
                            <Select v-model="eventForm.owner" style="width:100%" filterable placeholder="非必选">
                                <Option v-for="item in owners" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :sm="24">
                        <FormItem label="故障描述：" prop="desc" required>
                            <Input :disabled="hasSubmit" v-model="eventForm.desc" type="textarea" :autosize="{minRows: 4,maxRows: 8}" placeholder="请输入故障描述" />
                        </FormItem>
                    </Col>
                    <Col :sm="24" :md="24" :lg="8">
                        <FormItem label="相关控制器" prop="controller">
                            <Select v-model="eventForm.controller" style="width:100%" filterable placeholder="AC" :disabled="hasSubmit">
                                <Option v-for="item in ACs" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :sm="24" :md="24" :lg="8">
                        <FormItem label="相关AP" prop="AP">
                            <Select v-model="eventForm.AP" style="width:100%" filterable placeholder="AP" :disabled="hasSubmit">
                                <Option v-for="item in APs" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :sm="24" :md="24" :lg="8">
                        <FormItem label="相关终端" prop="client">
                            <Select v-model="eventForm.client" style="width:100%" filterable placeholder="终端" :disabled="hasSubmit">
                                <Option v-for="item in clients" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :sm="24">
                        <FormItem label="优先级：" prop="priority">
                            <RadioGroup v-model="eventForm.priority">
                                <Radio :disabled="hasSubmit" label="低"></Radio>
                                <Radio :disabled="hasSubmit" label="中"></Radio>
                                <Radio :disabled="hasSubmit" label="高"></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col :sm="24">
                        <FormItem label="">
                            <Button :disabled="hasSubmit" @click="handleSubmit" style="width:100px;" type="primary">提交</Button>
                        </FormItem>
                    </Col>
                </Form>
                <Steps :current="currentStep" :status="status" style="padding-left: 64px">
                    <Step v-for="item in stepList" :title="item.title" :content="item.describe" :key="item.title"></Step>
                </Steps>
            </Card>
        </Row>
    </div>
</template>

<script>
export default {
  name: "workflow",
  data() {
    return {
      eventForm: {
        owner: "",
        controller: "",
        AP: "",
        client: "",
        priority: "",
        eventType: 0
      },
      eventTypes: [
        {
          value: "1",
          label: "无法连接"
        }
      ],
      owners: [
        {
          value: "1",
          label: "测试管理员"
        }
      ],
      ACs: [
        {
          value: "1",
          label: "测试AC"
        }
      ],
      APs: [
        {
          value: "1",
          label: "测试AP"
        }
      ],
      clients: [
        {
          value: "1",
          label: "测试终端"
        }
      ],
      stepList: [],
      eventTitle: {
        title: "",
        describe: "",
        content: ""
      },
      formRules: {
        eventType: [
          { required: true, message: "请选择类型", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写故障描述", trigger: "blur" }],
        priority: [
          { required: true, message: "请选择优先级", trigger: "change" }
        ]
      },
      hasSubmit: false,
      currentStep: 0,
      status: "wait"
    };
  },
  methods: {
    handleSubmit() {
      this.$refs["step"].validate(valid => {
        if (valid) {
          this.currentStep += 1;
          this.hasSubmit = true;
          this.$Message.success('提交成功！');
          setTimeout(() => {
            this.$router.push({ path: "/event-handler/event-management" });
          }, 2000);
        }
      });
    }
  },
  mounted() {
    this.stepList = [
      {
        title: "报告故障",
        describe: "张三提交"
      },
      {
        title: "解决故障",
        describe: "李四"
      },
      {
        title: "复核",
        describe: "王五"
      },
      {
        title: "确认解决",
        describe: "赵六"
      }
    ];
    this.eventTitle = {
      title: "网络性能故障（编号89757）",
      describe: "报告人：张三"
    };
    this.currentStep = 0;
  }
};
</script>
